<template>
  <yd-layout>
    <div class="cumi">
      <div class="cumi_top">
        <yd-flexbox direction="vertical">
          <yd-flexbox-item class="head">
            <div class="profile">
              <img :src="account_info.account_pic" />
            </div>
            <div class="info_name">
              <div class="name_1 de">
                <div class="name">{{ account_info.account_name }}</div>
              </div>
              <div class="name_1 de">
                <div class="attestation">
                  <div class="vip1" v-for="(item, index) in roles" :key="index">
                    <img :src="item.role_icon" alt />
                    <span>
                      {{
                      item.role_name
                      }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="qd_1">
              <div class="qd_2">
                <img src="../../static/user/sz.png" @click="$router.push('/mine/mineInfoDetail')" />
              </div>
            </div>
          </yd-flexbox-item>
          <yd-flexbox-item class="yh_info">
            <div class="yh_1">
              <span class="szz">{{ balance.totalAmount }}</span>
              <span class="zt">总金额</span>
            </div>
            <div class="yh_1">
              <span class="szz">{{ balance.frozenAmount }}</span>
              <span class="zt">冻结金额</span>
            </div>
            <div class="yh_1" @click="$router.push('/mine/bindCard')">
              <span class="szz">{{ balance.bank_card_num }}</span>
              <span class="zt">绑定银行卡</span>
            </div>
          </yd-flexbox-item>
          <yd-flexbox-item class="tabler">
            <div class="hy">
              <div>
                <div class="ye">
                  <span>可用余额</span>
                  <span>￥{{ balance.freeAmount }}</span>
                </div>
              </div>
              <div>
                <yd-button
                  type="warning"
                  style="height:.5rem"
                  shape="circle"
                  color="#fff"
                  @click.native="$router.push('/mine/cash')"
                >立即提现</yd-button>
              </div>
            </div>
          </yd-flexbox-item>
        </yd-flexbox>
      </div>
      <div class="gn">
        <yd-grids-group :rows="4">
          <yd-grids-item link="topup">
            <img slot="icon" src="../../static/user/th.png" />
            <span slot="text" class="te">余额充值</span>
          </yd-grids-item>
          <yd-grids-item link="mine/user_bank_card">
            <img slot="icon" src="../../static/user/dsh.png" />
            <span slot="text" class="te">银行卡</span>
          </yd-grids-item>
          <yd-grids-item link="agentshop">
            <img slot="icon" src="../../static/user/tdgt.png" />
            <span slot="text" class="te">探店官</span>
          </yd-grids-item>
          <yd-grids-item link="share_person">
            <img slot="icon" src="../../static/user/dpj.png" />
            <span slot="text" class="te">分享达人</span>
          </yd-grids-item>
        </yd-grids-group>
      </div>
      <div class="cumi_button">
        <yd-cell-group @click.native="$router.push('/mine/my_orders')">
          <yd-cell-item arrow class="dd_item">
            <img slot="icon" src="../../static/user/jf.png" size=".42rem" />
            <span slot="left">我的订单</span>
            <span slot="right" class="item_height"></span>
          </yd-cell-item>
        </yd-cell-group>
        <yd-cell-group @click.native="$router.push('/mine/myShare')">
          <yd-cell-item arrow class="dd_item">
            <img slot="icon" src="../../static/user/sy.png" />
            <span slot="left">我的分享</span>
            <span slot="right" class="item_height"></span>
          </yd-cell-item>
        </yd-cell-group>
        <yd-cell-group @click.native="$router.push('/mine/myComment')">
          <yd-cell-item arrow class="dd_item">
            <img slot="icon" src="../../static/user/gr.png" />
            <span slot="left">我的评论</span>
            <span slot="right" class="item_height"></span>
          </yd-cell-item>
        </yd-cell-group>
        <yd-cell-group>
          <yd-cell-item
            arrow
            class="dd_item"
            v-if="!isBoss"
            @click.native="$router.push('/applyforBoss')"
          >
            <img slot="icon" src="../../static/user/sh.png" size=".42rem" />
            <span slot="left">成为商家</span>
            <span slot="right" class="item_height"></span>
          </yd-cell-item>
          <yd-cell-item arrow class="dd_item" v-else @click.native="$router.push('/business')">
            <img slot="icon" src="../../static/user/sh.png" size=".42rem" />
            <span slot="left">我的店铺</span>
            <span slot="right" class="item_height"></span>
          </yd-cell-item>
        </yd-cell-group>

        <yd-button type="danger" size="large" style="margin:.15rem 0" @click.native="logout">退出登录</yd-button>
      </div>
    </div>
  </yd-layout>
</template>

<script>


export default {
  name: "AcccountIndex",
  data() {
    return {
      role_infos: [
        {
          role_name: "商家",
          role_icon: require("@/static/user/shss.png")
        },
        {
          role_name: "探店官",
          role_icon: require("@/static/user/tdgss.png")
        },
        {
          role_name: "分享达人",
          role_icon: require("@/static/user/drss.png")
        }
      ],
      roles: [],
      account_info: {
        account_name: "",
        account_pic: "",
        account_role: [],
        account_id: 1
      },
      balance: {
        totalAmount: 0,
        frozenAmount: 0,
        freeAmount: 0,
        bank_card_num: 1
      },
      isBoss: false,
     
    };
  },
  mounted() {
    this.get_account_info();
    this.get_my_balance();

 
  },
  computed:{
    location_url(){
      return this.url
      // return this.url[0]+this.url[1].substring(1,this.url[1].length)
    }
  },
  methods: {
    

    /*
     * 获取用户的基本信息
     * 作者：gzt
     * 时间：2019-11-27 14:24:55
     */
    get_account_info() {
      let _this = this;
      this.$post(this.$api.account.account_info, {
        account_id: 28
      }).then(res => {
        if (res.success) {
          _this.account_info = { ...res.data.user };
          if (res.data.discounts) this.isBoss = true;
          if (
            _this.account_info.account_role &&
            _this.account_info.account_role.length > 0
          ) {
            for (let role of _this.role_infos) {
              if (
                _this.account_info.account_role.findIndex(
                  ent => ent == role.role_name
                ) != -1
              ) {
                _this.roles.push(role);
              }
            }
          }
        }
      });
    },

    /*
     * 我的余额
     * 作者：gzt
     * 时间：2019-11-29 11:21:42
     */
    get_my_balance() {
      let _this = this;
      this.$post(this.$api.account.my_balance, {
        userId: 1
      }).then(res => {
        if (res.success) {
          _this.balance = { ...res.data };
        }
      });
    },

    logout() {
      // localStorage.clear();
      this.$store.dispatch("Logout").then(res => {
        console.log("ok");
      });
    }
  }
};
</script>
<style scoped>
.head {
  display: flex;
  color: #eceaea;
  padding: 0.3rem 0.4rem 0.3rem 0.2rem;
}
.profile {
  width: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile img {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid #ffffff;
  border-radius: 120px;
}
.info_name {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}
.de {
  padding: 0.1rem;
}
.name_1 {
  display: flex;
  align-items: center;
}
.name {
  font-size: 0.35rem;
  letter-spacing: 0.03rem;
}
.name_id {
  text-align: left;
}
.dd_h {
  height: 0.6rem;
}
.dd_item {
  height: 0.8rem;
}
.attestation {
  color: #ece9e9;
  font-size: 0.2rem;
  display: flex;
  align-items: center;
  width: 100%;
}
.vip1 {
  width: 1rem;
}
.vip3 {
  width: 1.4rem;
}
.vip2 {
  width: 1.2rem;
}
.attestation div {
  display: flex;
  align-items: center;
  margin-right: 0.1rem;
}

.vip1 img {
  height: 0.35rem;
  padding-right: 0.05rem;
}
.vip2 img {
  height: 0.35rem;
  padding-right: 0.05rem;
}
.vip3 img {
  height: 0.3rem;
  padding-right: 0.05rem;
}
.qd_1 {
  display: flex;
  width: 0.5rem;
  justify-content: flex-end;
  align-items: center;
}
.qd_2 {
  height: 0.4rem;
}
.qd_2 img {
  width: 0.4rem;
  height: 0.4rem;
}
.yh_info {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.yh_1 {
  display: flex;
  color: #e5e2e2;
  font-size: 0.3rem;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
}
.szz {
  font-size: 0.4rem;
  padding-bottom: 0.2rem;
}
.zt {
  font-size: 0.25rem;
}
.tabler {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 0.3rem;
}
.hy {
  background: url(../../static/user/huiyuan.png);
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.15rem 0.3rem;
  border-radius: 6px 6px 0px 0px;
  font-size: 0.2rem;
  color: rgb(107, 109, 109);
}
.ye {
  font-size: 0.3rem;
  text-align: left;
  color: rgb(241, 134, 12);
}
.ye span {
  padding-right: 0.3rem;
}
.gn {
  padding: 0.3rem 0.3rem;
}
.xj_item {
  height: 0.9rem;
  margin-top: 0.1rem;
  background: #ffffff;
  border-top: 0.2rem solid #f5f2f2;
}
.yd-cell:after {
  height: 0rem;
}
.yd-cell-right {
  min-height: 0rem;
}
/*网格修改*/

.yd-grids-icon img {
  height: 90%;
}
.yd-grids-4 {
  padding: 0.3rem 0.2rem;
}
.te {
  font-size: 0.3rem;
  color: #999;
}
.yd-grids-item {
  padding: 0rem;
}
.yd-grids-item:after {
  height: 0rem;
}
.yd-grids-4 .yd-grids-item:not(:nth-child(4n)):before {
  height: 0rem;
}
.yd-grids-4:before {
  height: 0rem;
}
/* .yd-cell{
        background: #b9b8b8;
    } */
.hairline .yd-scrollview {
  margin-top: 0px;
}
.ios .yd-scrollview {
  margin-top: 0px;
}
.yd-navbar:after {
  height: 0px;
}
.cumi {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.3rem;
}
.cumi_top {
  height: 4rem;
  background: url(../../static/user/top.png);
  background-size: 100%;
}
.cumi_button {
  padding: 0rem 0.3rem;
  background: #f5f5f5;
}
.yd-scrollview:after {
  height: 0px;
}
.yd-cell-item {
  padding-left: 0.4rem;
}
.yd-cell-right {
  padding-right: 0.4rem;
}
.yd-cell-icon img {
  height: 0.4rem;
  vertical-align: bottom;
  padding-right: 0.2rem;
}
.yd-cell-box {
  margin-bottom: 0rem;
}
.dd_item {
  height: 1rem;
}
</style>
